/*
 * Description: 测试js一些api
 * Author: wangyifei
 * DateCreated: 2024-04-02 10:37
 */

import { useEffect, useState } from 'react';
import { textSize } from './utils';
import styled from 'styled-components';
import cssStyle from './style.module.css';
import { uniq, uniqBy } from 'lodash-es';

const TestStyle = styled.div`
	width: 100%;
	height: 50px;
	background: yellow;
`;

const text = '测试文字问题宽度测试测试测试测试';
const bar = 'text';

function sortFieldMatch(field: string) {
	const stringArray = field.split(''); // 将字符串分割成相应的字符串数组
	let newField = field;
	stringArray.forEach((t) => {
		if (/[A-Z]/.test(t)) {
			// 遍历分割之后的字符串组，将找到的大写字母替换成其他字符串，将替换后的字符串赋值给另外一个新的string 变量
			newField = newField.replace(t, `-${t.toLowerCase()}`);
		}
	});
	return newField;
}

function isNullObj(obj: any) {
	const bar = JSON.stringify(obj) === '{}';

	console.log(Object.keys(obj).length);

	return bar;
}

const obj = { name: 'frank', age: 18, height: 1.88 };
Object.defineProperty(obj, 'name', {
	enumerable: false
});

for (const key in obj) {
	console.log(key);
}

const objArr = [{ id: 123 }, { id: 234 }, { id: 123 }];
console.log(uniqBy(objArr, 'id'));

const JSApiTest = () => {
	const [flog, setFlog] = useState('否');
	useEffect(() => {
		// console.log(textSize('14px', text, 10));
		// console.log(sortFieldMatch(bar));

		setFlog(isNullObj(obj) ? '是' : '否');
	}, []);

	return (
		<TestStyle>
			<span style={{ fontSize: '14px' }}>{text.slice(0, 10)}</span>
			<div className={cssStyle.title}>测试</div>
			<div>{flog}</div>
		</TestStyle>
	);
};

export default JSApiTest;
